<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">添加优惠券</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <input type="hidden" name="id" value="{$row.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="coupon_type" value="1" lay-filter="coupon-type" {if
                           condition='$row.coupon_type==1' } checked {/if} title="满减卷">
                    <input type="radio" name="coupon_type" value="2" lay-filter="coupon-type" {if
                           condition='$row.coupon_type==2' } checked {/if} title="立减卷">
                    <input type="radio" name="coupon_type" value="3" lay-filter="coupon-type" {if
                           condition='$row.coupon_type==3' } checked {/if} title="拼团卷">
                    <input type="radio" name="coupon_type" value="4" lay-filter="coupon-type" {if
                           condition='$row.coupon_type==4' } checked {/if} title="转卖卷">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券名称</label>
                <div class="layui-input-block">
                    <input type="text" name="coupon_name" value="{$row.coupon_name}" required lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券图标</label>
                <div class="layui-input-block">
                    <input type="hidden" name="icon" id="icon" value="{$row.icon}">
                    <img src="{$row.icon}" id="upload" class="layui-upimg">
                </div>
            </div>
            <label class="layui-form-label">是否允许积分兑换</label>
            <div class="layui-input-block">
                <input type="radio" name="is_integral_redeem" value="1" checked title="允许">
                <input type="radio" name="is_integral_redeem" value="0" title="不允许">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">兑换积分数</label>
                <div class="layui-input-inline">
                    <input type="number" name="redeem_integral" value="{$row.redeem_integral}"  autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到期类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="expire_type" lay-filter="expire-type" value="1" checked title="领取后生效">
                    <input type="radio" name="expire_type" lay-filter="expire-type" value="2" title="固定日期">
                </div>
            </div>
            <div class="layui-form-item" id="day">
                <label class="layui-form-label">有效天数</label>
                <div class="layui-input-inline">
                    <input type="number" autocomplete="off" value="0" name="expire_day" class="layui-input"
                           placeholder="请输入有效天数">
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="expire">
                <label class="layui-form-label">时间范围</label>
                <div class="layui-input-block" id="time">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="start_time" value="{$row.start_time}" id="strat-time" class="layui-input"
                               placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="end_time" value="{$row.end_time}" id="end-time" class="layui-input"
                               placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="with-amount">
                <label class="layui-form-label">使用金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="with_amount" value="{$row.with_amount}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux layui-font-red">商品金额满足条件后可使用</div>
                </div>
            </div>
            <div class="layui-form-item" id="used-amount">
                <label class="layui-form-label">立减金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="used_amount" value="{$row.used_amount}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux layui-font-red">商品优惠金额</div>
                </div>
            </div>
            <div class="layui-form-item" id="coupon-goods">
                <label class="layui-form-label">可用商品</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" disabled style="width: 800px;" id="goods-names" autocomplete="off"
                               class="layui-input">
                        <input type="hidden" name="allow_goods" id="allow-goods">
                        <input type="hidden" name="param" id="param" value="{$row.goods|json_encode}">
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="choose-goods">选择</button>
                    </div>
                </div>
                <div class="layui-input-block" id="imgs">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="quota" required lay-verify="required" value="{$row.quota}"
                           autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux layui-font-red">为-1则不限制数量</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea">{$row.desc}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" {if condition='$row.status==1' } checked {/if}
                    title="启用">
                    <input type="radio" name="status" value="0" {if condition='$row.status==0' } checked {/if}
                    title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formAdd">保存优惠券</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.jquery, form = layui.form, upload = layui.upload, laydate = layui.laydate;

        upload.render({
            elem: "#upload",
            field: "image",
            url: "/store/upload",
            done: function (res) {
                if (res.code == 1) {
                    $('#upload').attr('src', res.src)
                    $('#icon').val(res.src);
                }
            }
        });


        let expire_type = '{$row.expire_type}';

        if (expire_type==1){
            $('#expire').addClass('layui-hide');
            $('#day').removeClass('layui-hide');
        }

        if (expire_type==2){
            $('#expire').removeClass('layui-hide');
            $('#day').addClass('layui-hide');
        }

        let coupon_type = '{$row.coupon_type}';
        switch (coupon_type) {
            case "1" :
                $('#with-amount').removeClass('layui-hide');
                $('#used-amount').removeClass('layui-hide');
                $('#coupon-goods').removeClass('layui-hide');
                break;
            case "2":
                $('#with-amount').addClass('layui-hide');
                $('#used-amount').removeClass('layui-hide');
                $('#coupon-goods').removeClass('layui-hide');
                break;
            case "3" :
                $('#with-amount').addClass('layui-hide');
                $('#used-amount').addClass('layui-hide');
                $('#coupon-goods').addClass('layui-hide');
                $('#expire').addClass('layui-hide');
                $('#day').removeClass('layui-hide');
                break;
            case "4" :
                $('#with-amount').addClass('layui-hide');
                $('#used-amount').addClass('layui-hide');
                $('#coupon-goods').addClass('layui-hide');
                break;
        }

        form.on('radio(expire-type)', function (data) {
            if (data.value==1){
                $('#expire').addClass('layui-hide');
                $('#day').removeClass('layui-hide');
            }

            if (data.value==2){
                $('#expire').removeClass('layui-hide');
                $('#day').addClass('layui-hide');
            }
        })


        form.on('radio(coupon-type)', function (data) {
            switch (data.value) {
                case "1" :
                    $('#with-amount').removeClass('layui-hide');
                    $('#used-amount').removeClass('layui-hide');
                    $('#coupon-goods').removeClass('layui-hide');
                    break;
                case "2":
                    $('#with-amount').addClass('layui-hide');
                    $('#used-amount').removeClass('layui-hide');
                    $('#coupon-goods').removeClass('layui-hide');
                    $('#expire').removeClass('layui-hide');
                    $('#day').addClass('layui-hide');
                    break;
                case "3" :
                    $('#with-amount').addClass('layui-hide');
                    $('#used-amount').addClass('layui-hide');
                    $('#coupon-goods').addClass('layui-hide');
                    break;
                case "4" :
                    $('#with-amount').addClass('layui-hide');
                    $('#used-amount').addClass('layui-hide');
                    $('#coupon-goods').addClass('layui-hide');
                    break;
            }
        });

        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: ['#strat-time', '#end-time'],
            min: 0
        });

        let param = $('#param').val();

        if (param) {
            let data = JSON.parse(param);
            getUseGoodsInfo(data);
        }


        function getUseGoodsInfo(param) {

            $('#param').val(JSON.stringify(param));

            let ids = [], name = '', img = '';

            param.forEach(function (item) {
                ids.push({
                    goods_id: item.goods_id
                });
                name += item.goods_name + ';;',
                    img += '<div class="layui-inline"> ' +
                        '<img src="' + item.main_image + '" id="upload" class="layui-view-img">' +
                        '<i data-id="' + item.goods_id + '" class="layui-icon layui-view-img-close">&#x1006</i>' +
                        '</div>';
            });

            $('#allow-goods').val(JSON.stringify(ids));
            $('#imgs').html(img);
            $('#goods-names').val(name);
        }

        $(document).on('click', '.layui-view-img-close', function () {
            let goodsInfo = JSON.parse($('#param').val());
            let id = $(this).attr('data-id');

            let i = goodsInfo.findIndex(function (item) {
                return item.goods_id == id
            });
            goodsInfo.splice(i, 1);
            getUseGoodsInfo(goodsInfo);

        });

        $('#choose-goods').click(function () {
            let url = $(this).attr('data-url');
            layer.open({
                title: ['选择商品'],
                type: 2,
                area: ['1000px', '800px'],
                offset: '30px',
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/store/goods/option?type=1',
                yes: function (index, layero) {
                    let checkbox = $(layero).find('iframe').contents().find('.son:checked');
                    if (checkbox.length < 1) {
                        layer.msg('请选择商品!', {icon: 2});
                        return false;
                    }

                    let goodsInfo = [];


                    checkbox.each(function () {
                        goodsInfo.push({
                            goods_id: $(this).val(),
                            goods_name: $(this).parents('tr').find('.goods-name').text(),
                            main_image: $(this).parents('tr').find('.main-image').attr('src')
                        });
                    })
                    let param = [];

                    let paramEle = $('#param');
                    param = paramEle.val() ? JSON.parse(paramEle.val()).concat(goodsInfo) : goodsInfo;

                    getUseGoodsInfo(param);

                    parent.layer.close(index);
                }
            });

        });


        form.on('submit(formAdd)', function (data) {
            $.post('/store/market/coupon/update', data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    location.href = '/store/market/coupon'
                    return  false;
                }

                return layer.msg(res.msg, {icon: 2});
            });

            return false;
        });

    });
</script>